import { Button, Tooltip, Col, Row, Switch } from 'antd';
import { AreaChartOutlined } from '@ant-design/icons';
import React, { useState } from 'react';
import LazyLoad from 'react-lazyload';
import { history, connect, useSelector } from 'umi';
import Business from '@/hoc/Business';
function rental({ dispatch }: any) {
  const { shopRentalList, searchList } = useSelector(({ business }: any) => {
    return business;
  });
  const [count, setCount] = useState(3);
  console.log(shopRentalList);
  const columns: any = [
    {
      title: 'ID',
      width: 30,
      dataIndex: 'id',
      align: 'center',
      search: false,
      sorter: (a: any, b: any) => b.id - a.id,
    },
    {
      title: '楼盘名称',
      width: 50,
      dataIndex: 'estate_name',
      align: 'center',
      search: false,
    },
    {
      title: '标题',
      width: 120,
      search: false,
      dataIndex: 'title',
      align: 'center',
      render: (item: any, record: any) => {
        return (
          <React.Fragment>
            {item}
            <Tooltip
              title={
                <LazyLoad>
                  <img
                    src={`http://fangadmin.shbwyz.com${record.img}`}
                    style={{ width: '80px', height: '80px' }}
                  ></img>
                </LazyLoad>
              }
            >
              <AreaChartOutlined style={{ margin: '0 5px' }} />
            </Tooltip>
            <img
              src="http://fangadmin.shbwyz.com/static/images/rec.png"
              alt=""
            />
          </React.Fragment>
        );
      },
    },
    {
      title: '面积',
      width: 60,
      dataIndex: 'acreage',
      align: 'center',
      search: false,
      render: (item: any) => {
        return <span>{item}m²</span>;
      },
    },
    {
      title: '价格',
      dataIndex: 'price',
      width: 40,
      search: false,
      align: 'center',
      render: (item: any) => {
        return <span>{item}万</span>;
      },
    },
    {
      title: '排序',
      dataIndex: 'ordid',
      width: 60,
      search: false,
      align: 'center',
      sorter: (a: any, b: any) => a.ordid - b.ordid,
    },
    {
      title: '状态',
      dataIndex: 'status',
      width: 40,
      align: 'center',
      search: false,
      render: (item: any) => {
        return (
          <Switch
            checkedChildren="正常"
            unCheckedChildren="禁用"
            defaultChecked={item === 1 ? true : false}
          />
        );
      },
    },
    {
      title: '操作',
      width: 80,
      key: 'option',
      search: false,
      valueType: 'option',
      align: 'center',
      render: (item: any, record: any) => {
        return (
          <React.Fragment>
            <Row>
              <Col xs={{ span: 4, offset: 4 }} lg={{ span: 5, offset: 4 }}>
                <Button
                  size="small"
                  onClick={() => {
                    history.push('/home/business/shopIndex/editshopDetail', {
                      id: record.id,
                      count,
                    });
                  }}
                >
                  编辑
                </Button>
              </Col>
              <Col xs={{ span: 4, offset: 2 }} lg={{ span: 5, offset: 4 }}>
                <Button
                  size="small"
                  onClick={() => {
                    dispatch({
                      type: 'business/DELSHOPRENTAL',
                      payload: record.id,
                    });
                  }}
                >
                  删除
                </Button>
              </Col>
            </Row>
          </React.Fragment>
        );
      },
    },
  ];

  return (
    <Business columns={columns} data={shopRentalList} count={count}></Business>
  );
}
const mapStateToProps = ({ business: { shopRentalList } }: any) => {
  return {
    shopRentalList,
  };
};

export default connect(mapStateToProps)(rental);
